<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
  <script language="javascript" type="text/javascript">
    var socket = null;

    function log(msg) {
        const logElem = document.getElementById("log");
        const p = document.createElement("p");
        p.textContent = msg;
        logElem.appendChild(p);
        logElem.scroll(0, logElem.scrollHeight);
    }

    function connect() {
        disconnect();
        socket = new WebSocket(document.getElementById("wsUri").value);
        log("Connecting...");
        socket.addEventListener("open", function() {
            log("Connected.");
            update_ui();
        });
        socket.addEventListener("message", function(e) {
            log("Received: " + e.data);
        });
        socket.addEventListener("close", function() {
            log("Disconnected.");
            socket = null;
            update_ui();
        });
    }

    function disconnect() {
        if (socket !== null) {
            log("Disconnecting...");
            socket.close();
            socket = null;
            update_ui();
        }
    }

    function update_ui() {
        const status = document.getElementById("status");
        const connect = document.getElementById("connect");
        if (socket === null) {
            status.innerText = "disconnected";
            connect.innerText = "Connect";
        } else {
            status.innerText = "connected (" + socket.protocol + ")";
            connect.innerText = "Disconnect";
        }
    }

    window.addEventListener("DOMContentLoaded", function() {
        const protocol = (window.location.protocol=="https:" && "wss://" || "ws://");
        document.getElementById("wsUri").value = protocol + (window.location.host || "localhost:8080");

        document.getElementById("connect").addEventListener("click", function() {
            if (socket == null) {
                connect();
            } else {
                disconnect();
            }
            update_ui();
            return false;
        });

        document.getElementById("send").addEventListener("click", function() {
            const text = document.getElementById("text");
            log("Sending: " + text.value);
            socket.send(text.value);
            text.value = "";
            text.focus();
            return false;
        });

        document.getElementById("text").addEventListener("keyup", function(e) {
            if (e.keyCode === 13) {
                document.getElementById("send").click();
                return false;
            }
        });
    });
</script>
</head>
<body>
<h3>Chat!</h3>
<div>
  <input id="wsUri" type="text" />
  <button id="connect">Connect</button>&nbsp;|&nbsp;Status:
  <span id="status">disconnected</span>
</div>
<div id="log"
     style="width:20em;height:15em;overflow:auto;border:1px solid black">
</div>
<form id="chatform" onsubmit="return false;">
  <input id="text" type="text" />
  <input id="send" type="button" value="Send" />
</form>
</body>
</html>
